<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="getKioskClick()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="createDate">
        <el-date-picker v-model="searchForm.createDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-right: 10px;" label="设备" prop="kioskId"
        <el-select v-model="searchForm.kioskId" placeholder="请选择设备">
          <el-option
            v-for="item in kioskList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 10px;">
        <el-button type="primary" @click="getKioskClick()" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <!-- <div style="position: absolute; top: 20px; left: 30px; color: #3f9eff;">美食<span style="font-size: 14px;">（点击数：1000）</span></div> -->
        <ve-line :data="chartData" :settings="chartSettings"></ve-line>
        <div style="padding-left: 10px;">合计：{{total}}</div>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-button-group class="pull-right">
        <el-button v-if="hasPermission('smis:tongji:jfKioskTongjiClick:export')" type="default" size="small" icon="el-icon-download"
          title="导出" @click="exportExcel()"></el-button>
        <el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
        </el-button>
      </el-button-group>
    </el-row>
    <el-table :data="dataList" border size="medium" @selection-change="selectionChangeHandle" @sort-change="sortChangeHandle"
      v-loading="loading" class="table">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="createDate" show-overflow-tooltip sortable="custom" label="创建时间">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" v-if="hasPermission('smis:tongji:jfKioskTongjiClick:edit')" @click="edit(scope.row.id)">{{scope.row.createDate}}</el-link>
          <el-link type="primary" :underline="false" v-else-if="hasPermission('smis:tongji:jfKioskTongjiClick:view')"
            @click="view(scope.row.id)">{{scope.row.createDate}}</el-link>
          <span v-else>{{scope.row.createDate}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="modularType" show-overflow-tooltip sortable="custom" label="模块类型">
        <template slot-scope="scope">
          {{ $dictUtils.getDictLabel("modular_type", scope.row.modularType, '-') }}
        </template>
      </el-table-column>
      <el-table-column prop="actionType" show-overflow-tooltip sortable="custom" label="点击类型">
      </el-table-column>
      <el-table-column prop="keyId" show-overflow-tooltip sortable="custom" label="内部资料ID">
      </el-table-column>
      <el-table-column prop="kioskId" show-overflow-tooltip sortable="custom" label="导视设备">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background layout="total, sizes, prev, pager, next, jumper">
    </el-pagination> -->
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      this.chartSettings = {
        metrics: ['点击量'],
        xAxisType: 'time'
      }
      return {
        searchForm: {
          createDate: [],
          kioskId: ''
        },
        kioskList: [],
        chartData: {
          columns: ['日期', '点击量'],
          rows: []
        },
        total: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(1,'months'), end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(3,'months'), end]);
            }
          }, {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(6,'months'), end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(12,'months'), end]);
            }
          }]
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        dataListSelections: [],
        isSearchCollapse: false,
        isImportCollapse: false,
        loading: false
      }
    },
    mounted() {
      this.getKioskList()
    },
    activated() {
      var now = (new Date())
      this.searchForm.createDate = [moment(now).subtract(1,'months'), now]
      // this.refreshList()
      this.getKioskClick()
    },
    methods: {
      getKioskList() {
        this.$http({
          url: '/smis/tongji/jfKioskTongji/getKioskList',
          method: 'get',
          params: {

          }
        }).then(({ data }) => {
          if (data && data.success) {
            this.kioskList = data.list || []
            this.kioskList.unshift({
              id: '',
              name: '全部'
            })
          }
        })
      },
      getKioskClick() {
        this.$http({
          url: '/smis/tongji/jfKioskTongji/getKioskClick',
          method: 'get',
          params: {
            'kioskId': this.searchForm.kioskId,
            'startTime': moment(this.searchForm.createDate[0]).format("YYYY-MM-DD")+' 00:00:00',
            'endTime': moment(this.searchForm.createDate[1]).format("YYYY-MM-DD")+' 23:59:59'
          }
        }).then(({ data }) => {
          if (data && data.success) {
            var list = data.list || []
            this.chartData.rows = []
            var total = 0
            list.forEach((item)=>{
              total += item.count || 0
              this.chartData.rows.push({
                '日期': item.createTime, '点击量': item.count
              })
            })
            this.total = total
          }
        })
      },
      // 获取数据列表
      refreshList() {
        this.loading = true
        this.$http({
          url: '/smis/tongji/jfKioskTongjiClick/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            // ...this.searchForm
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageNo = val
        this.refreshList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },

      // 排序
      sortChangeHandle(obj) {
        if (obj.order === 'ascending') {
          this.orderBy = obj.prop + ' asc'
        } else if (obj.order === 'descending') {
          this.orderBy = obj.prop + ' desc'
        } else {
          this.orderBy = ''
        }
        this.refreshList()
      },
      // 导入成功
      uploadSuccess(res, file) {
        if (res.success) {
          this.$message.success({
            dangerouslyUseHTMLString: true,
            message: res.msg
          })
        } else {
          this.$message.error(res.msg)
        }
      },
      // 下载模板
      downloadTpl() {
        this.$utils.download('/smis/tongji/jfKioskTongjiClick/import/template')
      },
      exportExcel() {
        this.$utils.download('/smis/tongji/jfKioskTongjiClick/export')
      },
      resetSearch() {
        this.$refs.searchForm.resetFields()
        this.refreshList()
      }
    }
  }
</script>
